<!DOCTYPE html>
<html lang="zh">
<head>
<title>商城首页</title>
  <{include file="public/header" /}>
  <style>
    .proimg>img{
      max-width: 100%;
    }

    .protxt>.name{
      min-height: 40px;
    }

    .bs-navs {
      width: 100%;

    }
    .bs-navs-ul {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      /* overflow-x: scroll; */
      align-content: center
    }
    a.nav-item {
      padding: 5px;
      vertical-align: middle;
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      flex-wrap: nowrap;
      flex-grow: 0;
      flex-shrink: 1;
      flex-basis: 52px;
      align-self: flex-end;
      color: black;
    }
    .nav-item-flex-grow{
      display: inline-flex;
      flex-grow: 1 !important;
    }
    .nav-item>img{
      width: 50px;
      height: 50px;
      vertical-align:middle;
    }
    p.n-p{
      font-size: 11px;
    }
   /*.goods-list{
      height: 700px;
      overflow-y: scroll;
    }*/
    .weui-content{
    /*  height: 700px;*/
      overflow-y: scroll;
    }
  </style>
</head>
<body ontouchstart>
<!--顶部搜索-->
<header class='weui-header'>
  <div class="weui-search-bar" id="searchBar">
    <form class="weui-search-bar__form" action="<{:url('/mall/goods/pro_list')}>">
      <div class="weui-search-bar__box">
        <i class="weui-icon-search"></i>
        <input type="search" name="keyword" class="weui-search-bar__input" id="searchInput" placeholder="搜索您想要的商品" required>
        <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
      </div>
      <label class="weui-search-bar__label" id="searchText" style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">
        <i class="weui-icon-search"></i>
        <span>搜索您想要的商品</span>
      </label>
    </form>
    <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
  </div>
</header>
<!--主体-->
<div class='weui-content'>
  <!--顶部轮播-->
  <div class="swiper-container swiper-banner">
    <div class="swiper-wrapper banner-item"></div>
    <div class="swiper-pagination"></div>
  </div>
  <!--图标分类-->
  <div class="bs-navs bs-navs-ul">

  </div>
  <!--新闻切换-->
  <div class="wy-ind-news">
    <i class="news-icon-laba"></i>
    <div class="swiper-container swiper-news">
      <div class="swiper-wrapper news-item">

      </div>
      <div class="swiper-pagination"></div>
    </div>
    <a href="<{:url('news_list')}>" class="newsmore"><i class="news-icon-more"></i></a>
  </div>
  <!--精选推荐-->
  <div class="wy-Module jingxuan-tuijian" style="display: none">
    <div class="wy-Module-tit"><span>精选推荐</span></div>
    <div class="wy-Module-con">
      <div class="swiper-container swiper-jingxuan" style="padding-top:34px;">
        <div class="swiper-wrapper goods-top-item">
        </div>
        <div class="swiper-pagination jingxuan-pagination"></div>
      </div>
    </div>
  </div>
  <!--推荐2-->
  <div class="wy-Module hot-tuijian" style="display: none">
    <div class="wy-Module-tit"><span>热门推荐</span></div>
    <div class="wy-Module-con">
      <div class="swiper-container swiper-jiushui" style="padding-top:34px;">
        <div class="swiper-wrapper goods-category-rec">
        </div>
        <div class="swiper-pagination jingxuan-pagination"></div>
      </div>
    </div>
  </div>
  <!--猜你喜欢-->
  <div class="wy-Module goods-list" style="display: none">
    <div class="wy-Module-tit-line"><span>猜你喜欢</span></div>
    <div class="wy-Module-con">
      <ul class="wy-pro-list clear"></ul>
      <div class="morelinks" style="display: none"><a href="<{:url('/mall/goods/pro_list')}>">查看更多 >></a></div>
    </div>
  </div>
  <div class="to_top" style="display: none">
    <img src="/static/mall/images/icon_to_top.png" alt="返回顶部" style="max-width: 100%" >
  </div>
</div>


<!--底部导航-->
<{include file="public/footer_nav" /}>

<{include file="public/footer" /}>


<script src="/static/mall/js/swiper.js"></script>
<script>
  //const vConsole = new VConsole();
  var loading = false;
  $(function () {
    //轮播
    bs_request("<{:url('/mall/home/get_banner')}>",{},function (res) {

      if (res.code==0 && res.data.banner.length>0){
        for (var i=0;i<res.data.banner.length;i++){
          $(".banner-item").append('<div class="swiper-slide"><a href="'+res.data.banner[i].url+'"><img src="'+res.data.banner[i].img+'" alt="'+res.data.banner[i].title+'" /></a></div>')
        }
      }
      $(".swiper-banner").swiper({
        loop: true,
        autoplay: 3000
      });
    });

    //导航
    bs_request("<{:url('/mall/home/get_navs')}>",{},function (res) {
     // return ;
      if (res.code==0 && res.data.navs.length>0){
        var length = res.data.navs.length;
        var className = 'nav-item '
        if (length<=5){
          className+=' nav-item-flex-grow'
        }
        for (var i=0;i<length;i++){
          $(".bs-navs-ul").append('<a href="'+res.data.navs[i].url+'" class="'+className+'">\n' +
                  '      <img src="'+res.data.navs[i].img+'" alt="'+res.data.navs[i].title+'">\n' +
                  '      <p class="n-p">'+res.data.navs[i].title+'</p>\n' +
                  '    </a>')

        }
      }

    });

    //公告
    bs_request("<{:url('/mall/home/get_article')}>",{},function (res) {

      if (res.code==0 && res.data.article.length>0){
        for (var i=0;i<res.data.article.length;i++){
          $(".news-item").append('<div class="swiper-slide"><a href="<{:url(\'news_info\')}>?id='+res.data.article[i].id+'">'+res.data.article[i].title+'</a></div>')
        }
      }
      $(".swiper-news").swiper({
        loop: true,
        direction: 'vertical',
        paginationHide :true,
        autoplay: 5000
      });
    });

    //精选推荐
    bs_request("<{:url('/mall/goods/goods_list')}>",{from:'home-jingxuan',page:1},function (res) {

      if (res.code==0 && res.data.goods.length>0){
        $(".jingxuan-tuijian").show();
        for (var i=0;i<res.data.goods.length;i++){
          $(".goods-top-item").append('<div class="swiper-slide"><a href="<{:url(\'/mall/goods/detail\')}>?id='+res.data.goods[i].id+'" ><img src="'+res.data.goods[i].thumb+'" /></a></div>')
        }
        $(".swiper-jingxuan").swiper({
        pagination: '.swiper-pagination',
        loop: true,
        paginationType:'fraction',
        slidesPerView:3,
        paginationClickable: true,
        spaceBetween: 2,
        autoplay: 3000
      });
      }
      
    });
    //热门推荐
    bs_request("<{:url('/mall/goods/goods_list')}>",{form:'hot_category',page:1},function (res) {

      if (res.code==0 && res.data.goods.length>0){
        $(".hot-tuijian").show();
        for (var i=0;i<res.data.goods.length;i++){
          $(".goods-category-rec").append(' <div class="swiper-slide"><a href="<{:url(\'/mall/goods/detail\')}>?id='+res.data.goods[i].id+'"><img src="'+res.data.goods[i].thumb+'" /></a></div>')
        }
        $(".swiper-jiushui").swiper({
        pagination: '.swiper-pagination',
        paginationType:'fraction',
        loop: true,
        slidesPerView:3,
        slidesPerColumn: 1,
        paginationClickable: true,
        spaceBetween:2,
        autoplay: 2000
      });
      }
      
    });

    //猜你喜欢
    var cpage = 1;
    function load_data(){

      bs_request("<{:url('/mall/goods/goods_list')}>",{page:cpage,from:'home_list'},function (res) {

        $.showLoading()
        if (res.code==0 && res.data.goods.length>0) {
          $(".goods-list").show();
          for (var i = 0; i < res.data.goods.length; i++) {
            $(".wy-pro-list").append('<li>\n' +
            '          <a class="goods-item" href="<{:url(\'/mall/goods/detail\')}>?id='+res.data.goods[i].id+'">\n' +
            '            <div class="proimg"><img src="'+res.data.goods[i].thumb+'" alt=""></div>\n' +
            '            <div class="protxt">\n' +
            '              <div class="name">'+res.data.goods[i].title+'</div>\n' +
            '              <div class="wy-pro-pri">¥<span>'+res.data.goods[i].price+'</span></div>\n' +
            '            </div>\n' +
            '          </a>\n' +
            '        </li>')
          }
        }else {
          $(".morelinks").show()
        }
        loading = false;
        $.hideLoading()
      });
    }

    // 滚动加载

    $(window).scroll(function() {

      var scrollTop = Number( $(this).scrollTop());
      if (scrollTop>700){
        $(".to_top").show()
      }else {
        $(".to_top").hide()
      }

      var scrollHeight = $(document).height();
      var windowHeight = $(this).height();
      if (scrollTop + windowHeight >= scrollHeight-50) {
        if (loading===false){
          loading = true;
          cpage++;
          load_data();
        }

      }
    });

    //点击的时候存储一下数据
    $(".wy-pro-list").on('click','.goods-item',function () {
      var status = {
        cpage: cpage,//当前分页
        scrollTop: $(window).scrollTop(),//当前滚动位置
        data:$(".wy-pro-list").html(),
      }
      sessionStorage.setItem('key_goods_home', JSON.stringify(status));
    })

    $(".to_top").on('click',function () {
      document.body.scrollTop = document.documentElement.scrollTop = 0;
      document.body.offsetHeight = document.documentElement.scrollHeight = 0;
    })

    //初始化页面检查：
    var gstatus = sessionStorage.getItem('key_goods_home');
    if (gstatus){
      gstatus = JSON.parse(gstatus);
      pt = gstatus.pt;
      keyword = gstatus.keyword;
      sort = gstatus.sort;
      cpage = gstatus.cpage;

      var offset =  gstatus.scrollTop;
      //旧数据还原
      $(".wy-pro-list").html(gstatus.data);
      //滚动位置跟上哈
      $(document).scrollTop(offset);
      //加载新的数据
      load_data()
    }else {
    //从零开始咯
      load_data()
    }
  })

</script>

</body>
</html>
